<?php $form_id = uniqid(); ?>
<div class="row-content lsp">
	<div class="content-left">
		<div class="row-content register-header">
			<div class="heading"></div>
			<div class="desc">You will be set up as a LSP Profile once you have registered your details.</div>
		</div>
		<div class="row-content register-content">
			<?php echo Form::open(array ('action' => '', 'class' => 'deaf-register', 'id' => '_form'.$form_id)); ?>
			<div class="fieldset">
				<div class="legend">Contact Details:</div>
				<div class="fieldset-content">
					<div class="row row-form">
						<div class="row-label">
							<label class="label">Mobile Number:</label>
						</div>
						<div class="row-content">
							<?php echo Form::input('mobile_number', '0987654321') ?><label class="inline">*</label>
						</div>
					</div>
					<div class="row row-form">
						<div class="row-label">
							<label class="label">Work Address:</label>
						</div>
						<div class="row-content">
							<?php echo Form::input('work_address', 'Work address 1') ?><label class="inline">*</label>
						</div>
					</div>
					<div class="row row-form">
						<div class="row-label"></div>
						<div class="row-content">
							<?php echo Form::input('work_address_1', 'Work address 2') ?><label class="inline">*</label>
						</div>
					</div>
					<div class="row row-form">
						<div class="row-label"></div>
						<div class="row-content">
							<?php echo Form::input('work_address_2', 'Work address 2') ?><label class="inline">*</label>
						</div>
					</div>
					<div class="row row-form">
						<div class="row-label">
							<label class="label">Country:</label>
						</div>
						<div class="row-content">
							<?php echo Form::select('country_id', null, $countries) ?><label class="inline">*</label>
						</div>
					</div>
					<div class="row row-form">
						<div class="row-label">
							<label class="label">Postcode:</label>
						</div>
						<div class="row-content">
							<?php echo Form::input('post_code', '10000') ?><label class="inline">*</label>
						</div>
					</div>
				</div>
				<div class="legend">Your job Details:</div>
				<div class="fieldset-content last">
					<div class="row row-form">
						<div class="row-label">
							<label class="label">NRCPD No.:</label>
						</div>
						<div class="row-content">
							<?php echo Form::input('nrcpd_no[]', 'NRCPD No 1') ?><a class="add-crcpd-item" onclick="User.addNRCPD(this);">Add+</a>
						</div>
					</div>
					<div id="_nrcpd_items_"></div>
					<div class="row row-form">
						<div class="row-label">
							<label class="label">Select your roles (Up to 3):</label>
						</div>
						<div class="row-content">
							<?php echo UI\Tag::multiple_select('roles[]', '', $roles, array('id' => $form_id.'_roles')) ?>
						</div>
					</div>
					<div class="row row-form">
						<div class="row-label">
							<label class="label">Choose the regions you are working at:</label>
						</div>
						<div class="row-content">
							<?php echo UI\Tag::multiple_select('region_id[]', '', $countries) ?>
						</div>
					</div>
					<div class="row row-form">
						<div class="row-label">
							<label class="label">Expertises:</label>
						</div>
						<div class="row-content">
							<?php echo Form::select('expertise_id[]', '', $expertises) ?>
							<?php echo Form::input(array(
								'class' => 'datepicker',
								'name' => 'expertise_date_start[]',
								'value' => '09/09/2013'
							)) ?>
							<a onclick="User.addExpertise(this);">Add+</a>
							<div id="_expertise_items_"></div>
						</div>
					</div>
					<div id="_expertise_items_"></div>
					<div class="row row-form">
						<div class="row-label">
							<label class="label">Memberships:</label>
						</div>
						<div class="row-content">
							<?php echo Form::select('membership_id[]', '', $memberships) ?>
							<?php echo Form::input(array(
								'class' => 'datepicker',
								'name' => 'membership_date_joined[]',
								'value' => '09/09/2013'
							)) ?>
							<a onclick="User.addMembership(this);">Add+</a>
							<div id="_membership_items_"></div>
						</div>
					</div>
					<div class="row row-form">
						<div class="row-label">
							<label class="label">Qualifications:</label>
						</div>
						<div class="row-content">
							<?php echo Form::select('qualification_type_id[]', '', $qualification_types, array(
								'onchange' => 'User.getQualification(this.value);'
							)) ?>
							<?php echo Form::select('qualification_id[]', '', $qualifications, array(
								'id' => $form_id.'_qualifications'
							)) ?>
							<?php echo Form::input(array(
								'class' => 'datepicker',
								'name' => 'qualification_date_archived[]',
								'value' => '09/09/2013'
							)) ?>
							<a onclick="User.addQualification(this);">Add+</a>
							<div id="_qualification_items_"></div>
						</div>
					</div>
			   </div>
			</div>
			
			<?php echo Form::submit(null, null, array('class' => 'create-account')) ?>
			<?php echo Form::close() ?>
		</div>
	</div>
	<div class="content-right">
		<?php echo Asset::img('files/ads.jpg', array('class' => 'fl mb20')) ?>
	</div>
</div>
<script>
	var User = {
		addNRCPD: function(obj) {
			(function($) {
				var total = $('#_nrcpd_items_ .nrcpd-item').length;
				var html = '<div class="row row-form nrcpd-item">'+
							'<div class="row-label">'+
								'<label class="label">NRCPD'+(total+1)+' No.:</label>'+
							'</div>'+
							'<div class="row-content">'+
								'<?php echo Form::input('nrcpd_no[]') ?><a class="add-crcpd-item" onclick="User.addNRCPD(this);">Add+</a>'+
							'</div>'+
						'</div>';
				$('#_nrcpd_items_').append(html);
				if(total > 0) {
					$(obj).parent().append('<a class="add-crcpd-item" onclick="User.removeNRCPD(this);">Del</a>');
				}
				$(obj).remove();
			})(jQuery);
		},
		removeNRCPD: function(obj) {
			(function($) {
				$(obj).parents('.row.nrcpd-item').remove();
			})(jQuery);
		},
		addServiceRole: function(val, obj) {
			(function($) {
				var _obj = $('#ms-<?php echo $form_id ?>_roles .ms-selectable');
				var length = _obj.find('li.ms-elem-selectable').length;
				if(val !== '') {
					var html = '<li class="ms-elem-selectable" id="'+(length+1)+'-selectable"><span>'+val+'</span></li>';
					_obj.find('ul.ms-list').append(html);
				}
			})(jQuery);
		},
		addExpertise: function(obj) {
			var html = '<div><select name="expertise_id[]">';
				<?php foreach($expertises as $id => $name): ?>
				html += '<option value="<?php echo $id?>"><?php echo $name ?></option>';
				<?php endforeach ?>
				html += '</select>';
			html += '<?php echo Form::input(array('class' => 'datepicker','name' => 'expertise_date_start[]', 'style' => 'margin-left: 8px;')) ?>';
			html += '<a onclick="jQuery(this).parent().remove();">Del</a></div>'
			$('#_expertise_items_').append(html);
			$("#_expertise_items_ select:not('.not-uniform')").uniform();
		    // datepicker
		    $('#_expertise_items_ .datepicker').datepicker();
		},
		addMembership: function(obj) {

		},
		addQualification: function(obj) {

		},
		getQualification: function(value) {
			(function($) {
				$.get(BASE_URL+'user/register/qualification/'+value, function(data) {
					if(data.status) {
						$('#<?php echo $form_id ?>_qualifications').html(data.html).prev().html('');
					} else {
						App.alert('Error loading...');
					}
				}, 'json');
			})(jQuery);
		}
	};
</script>